@<template>
  <div class="detail">
      <!-- <toast  :toastMsg="toastMsg" v-if='toastShow' /> -->
      <back-top v-show="isShow" @click.native="backTop"></back-top>
      <detail-nav ref="detailnav" @gothere="goThere" />
      <scroll ref="detailScroll" class='detail-content' @showBack="showBack" :pullUpLoad="true">
        <detail-item :goodsDetail="goodsDetail" />
        <detail-base :goods="goods"/>
        <detail-shop-info   :shop="shop" />
        <detail-goods-info @detailrefresh="detailrefresh" :detailImage="detailImage" />
        <detail-goods-params ref="canshu" :goodsParams="goodsParams" />
        <detail-comment-info ref="pinglun" :commentInfo="commentInfo" />
        <goods-list ref="tuijian" :goodsList="recommendItems" />
      </scroll>
      <detail-bottom-bar @addCart="addCart"/>
  </div>
</template>

<script>
import DetailNav from './DetailNav.vue'
import DetailItem from './DetailItem.vue'
import DetailBase from './DetailBase.vue'
import DetailShopInfo from './DetailShopInfo.vue'
import DetailGoodsInfo from './DetailGoodsInfo.vue'
import DetailGoodsParams from './DetailGoodsParams.vue'
import DetailCommentInfo from './DetailCommentInfo.vue'
import GoodsList from 'components/content/goods/GoodsList'
import DetailBottomBar from './DetailBottomBar.vue'

import Scroll from 'components/common/scroll/Scroll'

import {getDetail, Goods, Shop, GoodsParams, getRecommend} from 'network/detail.js'

import {debounce} from '@/common/utils'

import BackTopMixin from 'components/content/mixin/BackTopMixin.js'

import Toast from 'components/common/toast/Toast.vue'

export default {
    name:"Detail",
    mixins: [BackTopMixin],
    components: {
        DetailItem,
        DetailNav,
        DetailBase,
        DetailShopInfo,
        DetailGoodsInfo,
        Scroll,
        DetailGoodsParams,
        DetailCommentInfo,
        GoodsList,
        DetailBottomBar,
        // Toast,


    },
    data(){
        return {
            iid: 0,
            result: {},
            goods: {},
            goodsDetail: {},
            shop: {},
            detailImage: [],
            goodsParams: {},
            commentInfo: {},
            recommendItems: [],
            homeImageLoad: null,
            detailOffsetY: [0],
            detailNavObj: {},
            toastShow:false,
            toastMsg: ''
        }
    },
    created(){
        
        this.iid = this.$route.params.iid;

        getDetail(this.iid).then(res => {
            this.result = res.result;
            this.goodsDetail = res.result.itemInfo;
            this.goods = new Goods(this.goodsDetail,res.result.columns,res.result.shopInfo.services)
            this.shop = new Shop(res.result.shopInfo,res.result.detailInfo);
            this.detailImage = this.shop.detailInfo.detailImage[0].list;
            this.goodsParams = new GoodsParams(res.result.itemParams.info, res.result.itemParams.rule)
            //用户评论数据
            if(this.result.rate.cRate != 0 ) {
                this.commentInfo = this.result.rate.list[0]
            }
            
        })
        //请求推荐数据
        getRecommend().then(res => {
            // console.log(res)
            this.recommendItems = res.data.list
            this.$bus.$emit('recommendArray', this.recommendItems)
        })

        
    },
    methods: {

        //详情页 scroll刷新高度
        detailrefresh(){
            this.$refs.detailScroll?.scroll.refresh();

            
            
        },
        //详情页导航栏 点击事件
        goThere(index){
            this.$refs.detailScroll?.scroll.scrollTo(0,-this.detailOffsetY[index],200);
        },

        //scroll组件发出的屏幕滚动事件
        showBack(position){

            //判断屏幕滚动的高度,与导航栏形成联动效果
            if(-position.y < this.detailOffsetY[1]){
                this.detailNavObj.currentIndex = 0
            }else if (-position.y < this.detailOffsetY[2]){
                this.detailNavObj.currentIndex = 1
            }else if (-position.y < this.detailOffsetY[3]){
                this.detailNavObj.currentIndex = 2
            }else {
                this.detailNavObj.currentIndex = 3
            }

             if (Math.abs(position.y) > 2000) {
                this.isShow = true;
            } else {
                this.isShow = false;
            }
        },
        //添加到购物车
        addCart() {
            //获取购物车需要展示的数据
            const product = {}

            //异步获取数据后再执行
            if(Object.keys(this.goodsDetail).lenght != 0) {
                 product.image = this.goodsDetail.topImages[0]
                product.title = this.goods.title
                product.desc = this.goods.desc
                product.price = this.goods.realPrice
                product.iid = this.iid
                // this.$store.commit('changeCart',product)
                this.$store.dispatch('buyGoods',product).then(res => {
                    // this.toastMsg = res;
                    // this.toastShow = true;
                    // setTimeout(() => {
                    //     this.toastShow = false;
                    //      this.toastMsg = '';
                    // }, 1500);
                    // console.log(this.toastMsg)
                    this.$toast2.show(res);
                    
                })
            }
           
        }

    },
    mounted() {
        //保存详情页导航栏对象
        this.detailNavObj = this.$refs.detailnav
        
        const once = debounce(this.detailrefresh)

        //防抖 
        const getTop = debounce(()=> {
            this.detailOffsetY.push(this.$refs.canshu?.$el.offsetTop)
            this.detailOffsetY.push(this.$refs.pinglun?.$el.offsetTop)
            this.detailOffsetY.push(this.$refs.tuijian?.$el.offsetTop)
        })
        
        //推荐页 图片加载事件
        this.$bus.$on('detailImgLoad', () => {
            once();
            //添加各个组件到顶部的距离
            getTop();
            
        })

        
    },
    
}
</script>

<style>
.detail {
    position: relative;
    z-index: 2;
    background-color: #fff;
    height: 100vh;
}

.detail-content {
    height: calc(100% - 44px - 49px);
}
.back-top {
  position: fixed;
  z-index: 2;
  bottom: 50px;
  right: 10px;
}

</style>